<template>
  <div class="list-outer">
    <p class="list-title">查询到{{ list.length }}个搜索结果</p>
    <div class="list-list" v-if="list.length > 0">
      <div class="list-item" v-for="item in list" :key="item.id" @click="goVideoPage(item)">
        <img class="list-item__img" :src="item.img" alt="" />
        <p class="list-item__title">{{ item.title }}</p>
        <p class="list-item__text">
          <span>教师：</span>
          <span class="list-item__text--res">{{ item.username }}</span>
        </p>
        <p class="list-item__text">
          <span>教室：</span>
          <span class="list-item__text--res">{{ item.classroom }}</span>
        </p>
        <p class="list-item__text">
          <span>班级：</span>
          <span class="list-item__text--res">{{ item.className }}</span>
        </p>
      </div>
    </div>
    <div class="list-empty df aic jcc" v-else>
      <empty></empty>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import { getCourseList } from '@/api/homepage/index'
  import Empty from '@/components/empty.vue'

  export default defineComponent({
    name: 'List',
    components: {
      Empty,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const router = useRouter()

      const store = useStore()

      const state = reactive({
        list: [] as any,
      })

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        getData({})
      })

      const getData = async (params) => {
        console.log(params)
        const res = await getCourseList(params)
        state.list = res.list
      }

      const goVideoPage = (item) => {
        // window.open(`#/screen?id=${item.id}`, '_blank')
        router.push(`/screen?id=${item.id}`)
      }

      watch(
        () => route.query,
        (value) => {
          if (value) {
            getData(route.query)
          }
        }
      )

      return {
        ...toRefs(state),
        tableRef,
        goVideoPage,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .list-outer {
    padding: 24px 32px;

    .list-title {
      font-weight: bold;
      font-size: 18px;
      line-height: 26px;
      color: #333333;
      padding-bottom: 32px;
    }
    .list-empty {
      width: 100%;
      height: 100%;
      min-height: 400px;
    }
    .list-list {
      display: flex;
      flex-wrap: wrap;

      .list-item {
        width: 186px;
        height: 228px;
        padding: 12px;
        margin-right: 24px;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        color: #666;
        cursor: pointer;

        .list-item__img {
          width: 162px;
          height: 90px;
          border-radius: 4px;
        }

        .list-item__title {
          font-size: 16px;
          color: #333;
          padding: 12px 0 8px 0;
          font-weight: bold;
        }

        .list-item__text {
          color: #999;
          display: flex;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .list-item__text--res {
            color: #666;
          }
        }
      }
    }
  }
</style>
